<template>
    <div class="box">
        <div class="search">
            <el-input class="search-input" v-model="params.searchString" placeholder="请输入搜索内容" clearable
                @keyup.enter="loadOrdersRecords" />
            <el-button class="search-btn" type="primary" @click="loadOrdersRecords">搜索</el-button>
        </div>
        <div class="records">
            <div v-for="item in ordersRecords" class="record">
                <div class="record-title">
                    <div>购药时间：{{ item.order_time }}</div>
                    <!-- <div class="record-status">
                        <span class="point">•</span>
                        <span class="status">
                            <span v-if="item.is_pay == 0">未支付</span>
                            <span v-else>已支付</span>
                        </span>
                    </div> -->
                </div>
                <div class="record-content">
                    <p>
                        <span class="name">购买药品</span>
                        <span class="content">{{ item.medicationsString }}</span>
                    </p>
                    <p>
                        <span class="name">医疗机构</span>
                        <span class="content">{{ item.institution }}</span>
                    </p>
                    <p>
                        <span class="name">药品总价</span>
                        <span class="content fee">￥{{ item.order_price }}</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import { ordersRecordFindAPI } from '@/api/orders';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            params: {
                resident_id: JSON.parse(sessionStorage.getItem('user')).user_id,
                // 搜索关键词
                searchString: '',
                is_pay: 1,
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            ordersRecords: []
        }
    },
    methods: {
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadOrdersRecords();
        },
        searchmedication() {
            this.handleCurrentChange(1);
        },
        loadOrdersRecords() {
            ordersRecordFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.ordersRecords = resp.data.datas;
                    this.params.total = resp.data.total;
                } else {
                    ElMessage.warning(resp.data.message);
                }
            })
        }
    },
    created() {
        this.loadOrdersRecords();
    }
}
</script>

<style scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.search {
    width: 48%;
    display: flex;
    justify-content: space-between;
}

.search .search-input {
    flex: 6;
}

.search .search-btn {
    margin-left: 20px;
    flex: 1;
}

.records {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.record {
    padding: 10px;
    width: 100%;
}

.record .record-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: #3496ff;
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: 5px 10px;
}

.record .record-title .record-status {
    display: flex;
    align-items: center;
    line-height: 20px;
}

.record .record-title .record-status .point {
    font-size: 30px;
    letter-spacing: -5px;
}

.record .record-title .record-status .status {
    font-size: 14px;

}

.record .record-content {
    align-items: start;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    padding: 5px 10px;
    font-size: 14px;
}

.record .record-content .name {
    color: #aaa;
}

.record .record-content .content {
    margin-left: 15px;
}

.record .record-content .fee {
    color: rgb(255, 87, 45);
}

@media (max-width: 768px) {
    .box {
        width: 100%;
        height: 100%;
    }

    .el-card {
        width: 90vw;
        height: 100%;
    }

    .search {
        width: 90vw;
    }

    .search .search-status span {
        width: 12vw;
        display: flex;
    }

    .search .el-button {
        display: none;
    }

    .records {
        width: 90vw;
    }

    .record {
        width: 100%;
        height: 100%;
    }

    .record .record-content {
        width: 100%;
        font-size: 16px;
    }

    .record .record-content p {
        width: 100%;
        margin-bottom: 5px;
    }

    .record .record-content .btn {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .record .record-content .btn .el-button {
        width: 80%;
        margin: 5px 0;
    }
}
</style>